<template>
  <div style="height: 100%">
    <div class="autoScroll_y">
      <div class="selectBlock flexTitlePadding">
        <div class="viewBoxTitle flexTitle">
          <span>短信通知日志</span>
        </div>
        <div style="margin-top: 14px;">
          <el-row :gutter="25">
            <el-col :span="6" >
              <el-input size="small" placeholder="请输入接收人号码" v-model="listQuery.accepter" clearable></el-input>
            </el-col>
            <el-col :span="6" >
              <el-input size="small" placeholder="请输入阿里短信模版编号" v-model="listQuery.templateCode" clearable></el-input>
            </el-col>
            <el-col :span="6" >
              <el-select size="small" placeholder="请选择发送结果" v-model="listQuery.result" clearable>
                <el-option v-for="item in alismsStatusOptions" :key="item.key" :label="item.display_name" :value="item.key">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6" >
              <div class="searchBtnGroup">
                <el-button size="mini" type="success" @click="getList('find')">查 询</el-button>
                <el-button size="mini" type="danger" @click="handleReset">重 置</el-button>
                <el-button size="mini" type="primary" @click="handleCreate">新通知</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="elementTableBox">
        <el-table :key='tableKey' :data="list" v-loading="listLoading"
                  class="elementTable"
                  header-cell-class-name="elementTableHeader"
                  cell-class-name="elementTableBody"
                  element-loading-text="给我一点时间"
                  size="small"
                  height="320"
                  stripe
                  highlight-current-row style="width: 100%;">
          <el-table-column align="center" label="序号" min-width="50px" type="index">
            <template slot-scope="scope">
              <span>{{scope.$index + (serialNumber - 1) * 10 + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="接收人" prop="accepter">
            <template slot-scope="scope">
              <span>{{scope.row.accepter}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="阿里短信编号" prop="templateCode">
            <template slot-scope="scope">
              <span>{{scope.row.templateCode}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="短信签名" prop="signName">
            <template slot-scope="scope">
              <span>{{scope.row.signName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="发送状态" prop="result">
            <template slot-scope="scope">
              <span v-if="scope.row.result==1">发送成功</span>
              <span v-else-if="scope.row.result==0">发送失败</span>
              <span v-else>未知状态</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="发送时间" prop="sendTime">
            <template slot-scope="scope">
              <span>{{scope.row.sendTime}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操 作" width="160">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="handleView(scope.row)">查看</el-button>
              <el-button type="danger" size="mini" @click="handleDelete(scope.row,'delete')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination background
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="listQuery.page"
                         :page-sizes="[10,20,30, 50]"
                         :page-size="listQuery.limit"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </div>
      </div>
    </div>


    <!--新建邮件通知弹出层-->
    <el-dialog
      v-if="dialogVisibleAddalismsNotice"
      custom-class="dhcWebLayer"
      top="0"
      :close-on-click-modal="false"
      title="短信通知发送"
      :visible.sync="dialogVisibleAddalismsNotice"
      width="70%">
      <newAlismsNotice @changeCloseDialog="changeCloseDialog"></newAlismsNotice>
    </el-dialog>


    <!--邮件通知查看弹出层-->
    <el-dialog
      v-if="dialogVisibleViewalismsNotice"
      custom-class="dhcWebLayer"
      top="0"
      :close-on-click-modal="false"
      title="短信通知"
      :visible.sync="dialogVisibleViewalismsNotice"
      width="70%">
      <viewAlismsNotice :alismsNoticeFormData="alismsNoticeFormData" @changeCloseDialog="changeCloseDialog"></viewAlismsNotice>
    </el-dialog>
  </div>
</template>

<script>
    import '@/styles/newstyle.scss'
    import {
        queryAlismsPage,
        deleteAlismsNotice
    } from '@/api/message/index'
    import {
        isInnerOption,
        statusOptions,
        statusKeyValue,
        isInneNoKeyValue
    } from '@/utils/allOptions'

    import newAlismsNotice from './newAlismsNotice'
    import viewAlismsNotice from './viewAlismsNotice'

    export default {
        components: {
            newAlismsNotice,
            viewAlismsNotice
        },
        directives: {},
        data() {
            return {
                dialogVisibleAddalismsNotice: false,
                dialogVisibleViewalismsNotice: false,
                alismsNoticeFormData: {},
                alismsStatusOptions: [{key:'0', display_name:'发送失败'},{key:'1', display_name:'发送成功'}],
                list: null,
                listQuery: {
                    rowBounds: {
                        offset: 0,
                        limit: 10
                    },
                    fields: [],
                    accepter: '',
                    templateCode: '',
                    result: '',
                    sort: [
                        {
                            direction: 'DESC',
                            property: 'sendTime'
                        }
                    ]
                },
                total: null,
                listLoading: false,
                // table list
                selectId: '',
                serialNumber:1
            }
        },
        // 画面刚进入method
        mounted() {
            this.getList()
        },
        filters: {
            yesOrNoFilter(target) {
                return isInneNoKeyValue[target]
            },
            statusFilter(target) {
                return statusKeyValue[target]
            }
        },
        methods: {
            changeCloseDialog() {
                this.dialogVisibleAddalismsNotice = false
                this.dialogVisibleViewalismsNotice = false
                this.getList()
            },
            resetInfo() {
                this.editType = ''
            },
            handleCreate() {
                this.editType = '0'
                this.dialogVisibleAddalismsNotice = true
            },
            // 检索条件框回车键按下后，跳转到首页
            handleFilter() {
                this.listQuerypage = 1
                this.getList()
            },
            // 翻页器使用
            handleSizeChange(val) {
                this.listQuerypage = 1
                this.listQuery.rowBounds.limit = val
                this.getList()
            },
            // 翻页器使用
            handleCurrentChange(val) {
                this.serialNumber = val
                this.listQuerypage = val
                this.listQuery.rowBounds.offset =
                    this.listQuery.rowBounds.limit * (val - 1)
                this.getList()
            },
            handleDelete(row,flag) {
                this.$confirm('此操作将删除短信通知【' + row.templateCode + '到' + row.accepter + '】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {
                    const condition = {
                        id: row.mesId
                    }
                    deleteAlismsNotice(condition).then(response => {
                        this.$message({
                            message: '删除成功。',
                            type: 'success'
                        })
                        this.getList(flag)
                    })
                })
                .catch(error => {
                    console.error(error)
                })
            },
            displayMain() {
                this.resetInfo()
                this.getList()
            },
            handleEdit(row) {
                this.alismsNoticeFormData = row
                this.dialogVisibleViewalismsNotice = true
            },
            handleView(row) {
                this.alismsNoticeFormData = row
                this.dialogVisibleViewalismsNotice = true
            },
            getList(flag) {
                this.listLoading = true
                this.listQuery.orgId = this.$store.getters.orgId
                if (flag === 'find') {
                    this.listQuery.rowBounds.offset = 0
                    this.serialNumber = 1
                    this.total = 0
                }
                if (flag ==='delete') {
                    if (this.listQuery.rowBounds.offset == (this.total - 1)
                        && this.listQuery.rowBounds.offset >= this.listQuery.rowBounds.limit) {
                        this.listQuery.rowBounds.offset -=this.listQuery.rowBounds.limit
                        this.serialNumber -=1
                    }
                }
                const that = this
                //compositeSelect(this.listQuery).then(response => {
                queryAlismsPage(this.listQuery).then(response => {
                    this.list = response.data.data
                    this.total = response.data.count
                    this.listLoading = false
                })
            },
            handleReset() {
                this.listQuery.condition.name.value = ''
                this.listQuery.condition.status.value = '0'
                this.listQuery.condition.subsysid.value = ''
                this.listQuery.rowBounds.offset = 0
                this.listQuery.rowBounds.limit = 10
                this.list = null
                this.total = 0
                this.serialNumber = 1
                this.getList()
            }
        }
    }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }
  .select-container {
    padding: 10px 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid #eeeeee;
  }
  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 100%;
  }
</style>
